<template>
  <div class="amap_box" desen>
    <div id="container"></div>
  </div>
</template>
<script>
import loadAMap from "@/util/amap.js";
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    location(AMap) {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: "RB",
        // 浏览器定位坐标
        convert: false,
        // 1: 手机设备禁止使用浏览器定位
        noGeoLocation: 1,
      });

      geolocation.getCurrentPosition(function (status, result) {
        // console.log(status, result);
      });

      this.map.addControl(geolocation);
    },
  },
  created() {
    loadAMap({ plugins: ["AMap.Geolocation"] }).then((AMap) => {
      var map = new AMap.Map("container");
      this.map = map;
      this.location(AMap);
    });
  },
};
</script>
<style scoped lang="scss">
.amap_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>